<script setup lang="ts">
const {waterForm} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
}>();

// 存储计算结果的数组
const computedResults = ref([null, null, null, null]);
// const handleBlur = (index) => {
//   // 动态获取对应的 `kb_cdzX` 和 `kb_xdpcX`
//   const kb_cdzX = waterForm.bdatas.kbycd_fx[`kb_cdz${index}`];
//   const kb_cdzNext = waterForm.bdatas.kbycd_fx[`kb_cdz${index + 1}`];
//
//   // 如果当前和下一个值都不为空，进行计算
//   if (kb_cdzX !== null && kb_cdzNext !== null) {
//     // 计算公式 (kb_cdzX - kb_cdzNext) / (kb_cdzX + kb_cdzNext) * 100
//     console.log(kb_cdzX, kb_cdzNext)
//     const result = ((kb_cdzX - kb_cdzNext) / (kb_cdzX + kb_cdzNext)) * 100;
//     console.log(result)
//     computedResults.value[index] = result; // 保存结果到计算结果数组中
//     waterForm.bdatas.kbycd_fx[`kb_xdpc${index}`] = result; // 更新对应的 `kb_xdpcX` 值
//   }
// };

</script>


<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">环境空气和废气 电感耦合等离子体质谱法分析原始记录（B面）</h1>
      <div>SXLPHJ/JL/CX-22-75</div>
      <div style="display: flex;">
        <table class="table">
          <tr>
            <td colspan="5" style="text-align: center;">溶液配制</td>
          </tr>
          <tr>
            <td>标准贮备液批号</td>
            <td>标准贮备液浓度</td>
            <td>贮备液有效日期</td>
            <td>标准使用液浓度</td>
            <td>配置日期</td>
          </tr>
          <tr v-for="(item,index) in waterForm.bdatas.rypz" :key="index">
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.bzzbyph"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.bzzbynd"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.zbyyxrq"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.bzsyynd"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.pzrq"/>
            </td>
          </tr>
        </table>
        <table class="table">
          <tr>
            <td colspan="8" style="text-align: center;">标准曲线</td>
          </tr>
          <tr>
            <td>元素</td>
            <td colspan="7">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.ys1"/>
            </td>
          </tr>
          <tr>
            <td>编号</td>
            <td>标准空白</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
          <tr>
            <td>标准使用液加入量（mL）</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy1"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy2"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy3"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy4"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy5"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy6"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzsyy7"/>
            </td>
          </tr>
          <tr>
            <td>标准物质浓度（μg/L）</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd1"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd2"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd3"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd4"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd5"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd6"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.bzwznd7"/>
            </td>
          </tr>
          <tr>
            <td>校准曲线(y=a+bx)，r</td>
            <td colspan="4">
              曲线信息见 第 页至 页
            </td>
            <td>
              定容体积
            </td>
            <td colspan="2">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.bzqx.drtj"/>
            </td>
          </tr>
        </table>
      </div>
      <table class="table">
        <tr>
          <td colspan="6">元素</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.ys.ys1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.ys.ys2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.ys.ys3"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.ys.ys4"/>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div style="display: flex;align-items: center;justify-content: center">
              检出限(
              <el-input placeholder="请输入" v-model="waterForm.unit.jcx"></el-input>
              )
            </div>

          </td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.ys[`ys${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div style="display: flex;align-items: center;justify-content: center">
              测定下限(
              <el-input placeholder="请输入" v-model="waterForm.unit.cdxx"></el-input>
              )
            </div>
          </td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.cdxx[`cdxx${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="6">重复性限值r</td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.cfxxz[`cfxxz${index}`]"/>
          </td>
        </tr>
        <tr>
          <td rowspan="3">校核点</td>
          <td colspan="3" rowspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.ypbh"/>
          </td>
          <td colspan="2">
            <div style="display: flex;align-items: center;justify-content: center">
              测定值(
              <el-input placeholder="请输入" v-model="waterForm.unit.jhd_cdz"></el-input>
              )
            </div>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.cdz1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.cdz2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.cdz3"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.cdz4"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">相对误差
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.xdpc1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.xdpc2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.xdpc3"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.xdpc4"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.sfhg1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.sfhg2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.sfhg3"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.jhd.sfhg4"/>
          </td>
        </tr>
        <tr>
          <td rowspan="8">空白样测定</td>
          <td colspan="3" rowspan="2">
            校准空白
          </td>
          <td colspan="2">
            <div style="display: flex;align-items: center;justify-content: center">
              测定值(
              <el-input placeholder="请输入" v-model="waterForm.unit.kbycd_cdz"></el-input>
              )
            </div>
          </td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx[`jzkb_cdz${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx[`jzkb_sfhg${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="4">
            空白1(室)与
            空白2(室)
          </td>
          <td colspan="2">
            <div style="display: flex;align-items: center;justify-content: center">
              测定值(
              <el-input placeholder="请输入" v-model="waterForm.unit.kbycd_cdz1"></el-input>
              )
            </div>
          </td>
          <td v-for="(item,index) in 8" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      @blur="handleBlur(index)"
                      v-model="waterForm.bdatas.kbycd_fx[`kb_cdz${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item,index) in 8" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx[`kb_sfhg${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">相对偏差(%)</td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      :value="computedResults[index]"
                      v-model="waterForm.bdatas.kbycd_fx[`kb_xdpc${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">相对偏差是否合格</td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx[`kb_xdpcsfhg${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx.ypbh"/>
          </td>
          <td colspan="2">
            <div style="display: flex;align-items: center;justify-content: center">
              测定值(
              <el-input placeholder="请输入" v-model="waterForm.unit.kbycd_cdz2"></el-input>
              )
            </div>
          </td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx[`yp_cdz${index}`]"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td colspan="2" v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.kbycd_fx[`yp_sfhg${index}`]"/>
          </td>
        </tr>
        <tr>
          <td rowspan="3">平行样</td>
          <td colspan="3" rowspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.ypbh"/>
          </td>
          <td colspan="2">
            <div style="display: flex;align-items: center;justify-content: center">
              测定值(
              <el-input placeholder="请输入" v-model="waterForm.unit.pxy_cdz"></el-input>
              )
            </div>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz2"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz3"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz4"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz5"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz6"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz7"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdz8"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div style="display: flex;align-items: center;justify-content: center">
              测定值(
              <el-input placeholder="请输入" v-model="waterForm.unit.pxy_r"></el-input>
              )
            </div>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.xdpc1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.xdpc2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.xdpc3"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.xdpc4"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">r是否合格</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent;align-items: center" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.sfhg1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.sfhg2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.sfhg3"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.sfhg4"/>
          </td>
        </tr>
        <tr>
          <td colspan="4">备注</td>
          <td colspan="16">
            <el-input
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
                v-model="waterForm.bdatas.bnotes"
            />
          </td>
        </tr>
      </table>
    </el-card>
  </div>

</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
  text-align: center;
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
}

.table td {
  width: 1%;
}

.table-td {
  display: flex;
  justify-content: center;
  font-weight: 500;
  color: #303133;
}


::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
